<template>
  <a-button v-bind="$attrs" :disabled="isStart" @click="handleStart" :loading="loading">
    {{ buttonText }}
  </a-button>
</template>
<script>
export default {
  name: 'CountButton',
  props: {
    value: {
      type: Object | Number | String | Array
    },
    count: {
      type: Number,
      default: 60
    }
  },
  data() {
    return {
      loading: false,
      isStart: false,
      currentCount: 60,
      buttonText: '获取验证码'
    };
  },
  methods: {
    handleStart() {
      if (!this.isStart) {
        this.currentCount = 60;
        this.isStart = true
        this.buttonText = this.currentCount + '秒后重新获取';
        let interval = setInterval(() => {
          if (this.currentCount === 1) {
            this.isStart = false;
            interval && window.clearInterval(interval);
            interval = null;
          } else {
            this.currentCount -= 1;
          }
          this.buttonText = this.currentCount + '秒后重新获取';
        }, 1000);
      } else {
        this.buttonText = '获取验证码';
        this.isStart = false;
      }
    }
  }
}
</script>
